﻿<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<style>
     .field-validation-error {
       color: red;
       float: left;
       margin-left: 100px;
    }
</style>
@model HomeStayWebCP.Models.BusinessObject.MailObject
 
        @{
           
            using (Ajax.BeginForm("Sendmail", "Sendmail", new AjaxOptions() {HttpMethod = "Post", OnBegin = "loading", OnSuccess = "success" }))
            {
                 
                 @Html.ValidationSummary(true)    
            
                <div class="detailcontainer" style="height: 400px; padding: 10px; width: 330px; margin-top: 0px" id="formmail">
                    <div class="field" style="width: 400px">
                        <span class="leftlabel" style="width: 100px">Sender Name (*)</span>

                        <div class="editor-field" >
                            @Html.TextBoxFor(m => m.Sender,new {style="width:200px"})
                            @Html.ValidationMessageFor(model => model.Sender)
                        </div>
                    </div>
                    <div class="field" style="width: 400px">
                        <span class="leftlabel" style="width: 100px">Phone</span>
                        <div class="editor-field">
                            @Html.TextBoxFor(m => m.SenderPhone, new { style = "width:200px" })
                            @Html.ValidationMessageFor(model => model.SenderPhone)
                        </div>
                    </div>
                    <div class="field" style="width: 400px">
                        <span class="leftlabel" style="width: 100px">Email (*) </span>
                        <div class="editor-field">
                            @Html.TextBoxFor(m => m.SenderEmail, new { style = "width:200px" })
                            @Html.ValidationMessageFor(model => model.SenderEmail)
                        </div>
                    </div>
                    <div class="field" >
                        <div class="editor-field">
                            @Html.TextAreaFor(m => m.Content, new { style = "width:310px;height:150px", placeholder = "Message here....." })
                            @Html.ValidationMessageFor(model => model.Content,"", new { style = "margin-left: 0px;" })
                        </div>
                    </div>
                    <input type="submit" class="small button green" value="Send Mail" style="width: 80px; height: 30px; font-size: 12px;" />
                                     <div class="success" style="display: none;margin-top: 20px;width: 250px;border-radius: 5px"></div>
                </div>

                <div id="loading" style="display: none"><img src="../../Content/images/icons/ajax-loader.gif " style="position: absolute;top: 200px;left: 80px"/></div>
            }
        }
 <script type="text/javascript">
     function loading() {
       $("div#formmail").css("display", "none");
       $("div#loading").css("display", "block");
     
     }
     function success() {
         $("div#formmail").css("display", "block");
         $("div#loading").css("display", "none");
         $('textarea#Content').val('');
         $('.success').css('display', 'block');
         $('.success').html('Your message has been sent successfully');
     }
</script>